import React, { useEffect, useRef } from 'react'
import { Line } from '@antv/g2plot'

interface Props {
	data: any[]
}
const LineChart: React.FC<Props> = ({ data }) => {
	const containerRef = useRef<HTMLDivElement>(null)
	const chartRef = useRef<Line | null>(null)

	useEffect(() => {
		// 确保组件已经挂载并且 DOM 元素存在
		if (!containerRef.current) return

		// 创建新的图表实例
		const line = new Line(containerRef.current as HTMLElement, {
			data,
			xField: 'date',
			yField: 'value',
			seriesField: 'type',
			xAxis: {
				type: 'time',
				nice: true, // 美观
				label: {
					// autoRotate: false, // 自动旋转
					// rotate: Math.PI / 6, // 旋转角度
					offset: 10, // 轴线和文字的举例
					style: {
						// fill: '#D4EBFD', // 文字颜色
						fontSize: 12 // 文字大小
					}
				},
				line: {
					style: {
						// stroke: '#6CA1DD', // 轴线颜色
						// opacity: 0.3 // 透明度
					}
				},
				tickLine: {
					style: {
						stroke: 'transparent' // 设置刻度线颜色（隐藏）
					}
				}
			},
			yAxis: {
				label: {
					autoRotate: false, // 关闭自动旋转
					// 数值格式化为千分位
					formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
					style: {
						// fill: '#D4EBFD',
						fontSize: 12,
						fontWeight: 'bold'
					}
				},
				grid: {
					line: {
						style: {
							lineWidth: 1, // 设置虚线宽度
							// stroke: 'rgba(108, 161, 221, 0.3)',
							lineDash: [2, 2] // 虚线的密集度
						}
					}
					// alternateColor: 'red' // 分割线之间的颜色
				}
			},
			legend: {
				position: 'top-right',
				itemName: {
					style: {
						// fill: '#fff'
					},
					formatter: (name) => name
				},
				flipPage: true, // 分页
				maxRow: 2, // 两行分页
				pageNavigator: {
					marker: {
						style: {
							fill: '#8FD4FF', // 右边箭头颜色
							inactiveFill: '#8FD4FF' // 作伴箭头颜色
						}
					},
					text: {
						style: {
							fill: '#FFFFFF' // 设置文字颜色为白色
						}
					}
				},
				marker: {
					symbol: (x, y, r) => {
						return [
							['M', x - 9, y - 1], // 起始点
							['L', x + 9, y - 1], // 右上角
							['L', x + 9, y + 1], // 右下角
							['L', x - 9, y + 1], // 左下角
							['Z'] // 关闭路径
						]
					},
					style: {
						fill: 'currentColor' // 使用当前颜色填充
					}
				}
			},
			tooltip: {
				enterable: true, // 是否可进入Tooltip 内部
				follow: true, // 跟随鼠标
				shared: true, // 控制是否共享显示多个图形的信息
				offset: 20, // 距离
				marker: { lineWidth: 1, r: 3 }, // 点的样式
				domStyles: {
					// 标题
					'g2-tooltip-title': {
						fontSize: '14px',
						color: '#2882E8'
					}
				},
				showCrosshairs: true, // 启用十字准线
				crosshairs: {
					line: {
						style: {
							// stroke: '#1E89F4' // 鼠标移入，竖线的颜色
						}
					}
				}
			},
			lineStyle: {
				lineWidth: 1 // 线段宽度
			},
			interactions: [
				{ type: 'marker-active' }, // 高亮显示数据点
				{ type: 'brush' } // 框选数据区域（鼠标移入会有个十字，点击拖拽框选）
			],
			smooth: true, // 平滑
			// 度量相关配置 对应 xField || yField
			meta: {
				date: {
					range: [0.04, 1]
				}
			},
			animation: {
				appear: {
					animation: 'path-in', // 动画
					duration: 3000 // 动画持续
				}
			},
			slider: {
				start: 0.04,
				end: 0.96,
				formatter: () => '' // 隐藏缩略轴上的文字
			}
		})

		// 保存图表实例到 ref
		chartRef.current = line
		line.render()
		// 清理函数
		return () => {
			if (chartRef.current) {
				chartRef.current.destroy()
			}
		}
	}, []) // 空依赖数组意味着这个效果只在组件挂载时运行一次

	return <div ref={containerRef} />
}

export default LineChart
